<template>
	<view>
		<swiper class="swiper" @change="change" style="height: 730rpx;">
			<swiper-item v-for="(item,index) in list" :key="index">
				<u-grid :col="5" :border="false" hover-class="hover-class">
					<u-grid-item bg-color="#FFF0CA" v-for="(item1, index1) in item" :index="index1" :key="index1"
						@click="$emit('goToPages',item1)">
						<view class="grid-item-view1" v-if="signcount>item1.statusNum">
							<text class="grid-item-text">{{item1.text}}</text>
						</view>
						<view class="grid-item-view" v-else>
							<text class="grid-item-text">{{item1.text}}</text>
						</view>
						<text class="grid-text">{{item1.name}}</text>
					</u-grid-item>
				</u-grid>
			</swiper-item>
		</swiper>
		<view class="indicator-dots">
			<view class="indicator-dots-item" v-for="(item,index) in list" :key="index"
				:class="[current == index ? 'indicator-dots-active' : '']">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: Array,
			signcount: [String,Number]
		},
		data() {
			return {
				isSwiper: true,
				current: 0,
			}
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			}
		}
	}
</script>

<style lang="scss">
	.indicator-dots {
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.indicator-dots-item {
		background-color: $u-tips-color;
		height: 6px;
		width: 6px;
		border-radius: 10px;
		margin: 0 3px;
	}

	.indicator-dots-active {
		background-color: $u-type-primary;
	}

	.swiper-grid-image {
		width: 100rpx;
		height: 130rpx;
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 20rpx;
		color: #333333;
	}

	.grid-item-view {
		width: 100rpx;
		height: 130rpx;
		background: url('../../static/mine/19.png') no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.grid-item-view1 {
		width: 100rpx;
		height: 130rpx;
		background: url('../../static/mine/20.png') no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.grid-item-text {
		font-size: 12px;
		letter-spacing: 2px;
		color: #FFE2B7;
		z-index: 100;
		position: absolute;
		bottom: 20rpx;
	}
</style>